<template>
    <div class="home-page">
        <el-container>
            <el-aside>
                <div class="left-wrapper">
                    <div class="logo">
                        <img src="~@/assets/images/imgs/pic-logo-dark.png" alt="LOGO">
                    </div>
                    <div class="menu-wrapper">
                        <LeftMenu />
                    </div>
                </div>
            </el-aside>
            <el-main>
                <div class="header-wrapper">
                    <Header />
                </div>
                <div class="main-wrapper">
                    <router-view v-slot="{ Component, route }">
                        <keep-alive v-if="route.meta.keepAlive">
                            <component :is="Component" />
                        </keep-alive>
                        <component :is="Component" v-else />
                    </router-view>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
//引入头部组件
import Header from './components/header.vue'
//引入左侧菜单组件
import LeftMenu from './components/leftMenu.vue'
</script>
<style lang="scss" scoped>
.home-page {
    width: 100%;
    height: 100%;
}
.el-container {
    width: 100%;
    height: 100%;
    .el-aside {
        display: flex;
        width: 200px;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background: #20222A;
        .left-wrapper {
            width: 100%;
            height: 100%;
            box-shadow: 1px 0 2px 0 rgba(0,0,0,.05);
        }
        .logo {
            display: flex;
            width: 100%;
            height: 50px;
            flex-direction: row;
            align-items: center;
            padding-left: 30px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
        }
        .menu-wrapper {
            width: 100%;
            flex: 1;
            padding-top: 30px;
        }
    }
    .el-main {
        height: 100%;
        background: #f2f2f2;
        padding: 0;
    }
}
.header-wrapper {
    position: sticky;
    width: 100%;
    height: 120px;
    top: 0;
    background: #fff;
}
.main-wrapper {
    width: 100%;
    height: calc(100% - 120px);
    padding: 20px;
    overflow: auto;
}
</style>